<template>

  <div style="display: flex;justify-content: center;box-shadow: rgba(0,0,0,0.1) 0px 1px 1px 0px;">
    <div style="width: 1400px;height: 64px;display: flex;align-items: center;justify-content: space-between">
      <div id="left-box">
<!--        <img src="" alt="LOGO">-->
        <span @click="toUrl('/index')" class="menu-item">首页</span>
        <span @click="toUrl('/discover')" class="menu-item">发现</span>
        <span @click="toUrl('/message')" class="menu-item">消息</span>
      </div>
      <div id="right-box">
        <span @click="toUrl('/me')" v-if="login" class="menu-item">个人中心</span>
        <span @click="toUrl('/upload')" v-if="login" class="menu-item">上传视频</span>
        <span @click="toUrl('/login')" v-else class="menu-item">登录</span>
      </div>
    </div>
  </div>

  <router-view></router-view>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {useUserInfoStore} from "../../store/UserInfoStore";

const login = ref(false);

const router = useRouter();

function toUrl(url){
  router.push(url)
}

const userInfoStore = useUserInfoStore();

onMounted(()=>{
  if (userInfoStore.userInfo){
    login.value = true;
  }
})

</script>

<style scoped>

.menu-item{
  margin: 0 24px;
  cursor: pointer;
}

#left-box{
  display: flex;
}

</style>